<template>
	<view class="page-box">
		<view class="tab-box">
			<view :class="status == '取消支付'?'top-box':'top-box2'" @click="ChangeTab('取消支付')">待付款</view>
			<view :class="status == '待发货'?'top-box':'top-box2'" @click="ChangeTab('待发货')">待发货</view>
			<view :class="status == '待收货'?'top-box':'top-box2'" @click="ChangeTab('待收货')">待收货</view>
		</view>
		<view class="order-box" v-for="(item,index) in datalist" :key="index" >
			<image class="img" :src="item.image"></image>
			<view class="right-box">
				<view class="text1">{{item.title}}</view>
				<view class="text2">月销：{{item.num}}</view>
				<view class="text2">创建时间：{{item.date}}</view>
				<view class="text3">￥{{item.price}}</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status:'取消支付',
				datalist:''
			}
		},
		onLoad() {
			this.ChangeStatus()
		},
		methods: {
			ChangeTab(e){
				this.status = e;
				console.log('订单',this.status)
				this.datalist = '';
				this.ChangeStatus()
			},
			ChangeStatus(){
				uniCloud.callFunction({
					name:'getOrder',
					data:{
						status:this.status
					},
					success: (rest) => {
						console.log('订单获取成功',rest.result.data)
						this.datalist = rest.result.data
					},
					fail: (err) => {
						console.log('订单获取失败',err)
					}
				})
				}
			
		}
	}
</script>

<style scoped lang="scss">
	.tab-box{
		background-color: #FFFFFF;
		padding:0rpx 50rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		}
	.top-box{
		padding:30rpx 0rpx;
		border-bottom: 6rpx solid #ff6633;
		color:#ff6633;
		font-size: 30rpx;
		font-weight: 500;
		line-height: 36rpx;
		text-align: center;
		}
	.top-box2{
		padding:30rpx 0rpx;
		color: #333333;
		font-size: 30rpx;
		font-weight: 500;
		text-align: center;
		line-height: 36rpx;
		}	
	.order-box{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		background-color: #FFFFFF;
		padding: 34rpx 60rpx;
		margin-top: 24rpx;
		}
	.img{
		width: 250rpx;
		height: 250rpx;
		display: inline-block;
		margin-right: 36rpx;
		border-radius: 12rpx;
		}
	.right-box{
		width: 400rpx;
		}
	.text1{
		font-size: 30rpx;
		font-weight: bold;
		line-height: 40rpx;
		color: #000000;
		opacity: 1;
		}
	.text2{
		font-size: 26rpx;
		font-weight: 400;
		line-height: 40rpx;
		color: #BCBCBC;
		opacity: 1;
		margin: 20rpx 0rpx;
		}
	.text3{
		font-size: 30rpx;
		font-weight: 600;
		line-height: 40rpx;
		color: #EA5B0C;
		opacity: 1;
		}	
</style>
